<template>
  <div class="tab-bar">
    <nav>
      <a
        href="javascript:;"
        v-for="(item, index) in menu"
        :key="index"
        @click="change(index, item)"
        :class="{active: activeIndex === index}"
      >{{item[textKey]}}</a>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  props: {
    menu: {
      type: Array,
      default: () => []
    },
    textKey: {
      type: String,
      default: 'text'
    }
  },
  data () {
    return {
      activeIndex: 0
    }
  },
  methods: {
    change (index, row) {
      this.activeIndex = index
      this.$emit('change', index, row)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  @include wh(100%, 92px);
  line-height: 92px;
  nav {
    @include flex(row, space-between, center);
    a {
      font-size: $font-size-m;
      color: #4A4A4A;
      padding: 0 20px;
      &.active {
        color: $base-color;
        font-size: $font-size-l;
        font-weight: bold;
      }
    }
  }
}
</style>
